<template>
  <div class="chartListPane">
    <div class="newsTitle">
      <div class="el-icon-trophy">排行榜</div>
    </div>
    <div class="chartInfo" v-for="(chart,index) in charts" :key="index"><!-- v-for 不能写到当前组件的根目录-->
      <span class="chartNo" style="width:60px;margin-left: 50px">{{chart.no}}</span>
      <span class="chartName"  style="width:140px;">{{chart.name}}</span>
      <span class="chartScore"  style="width:60px;">{{chart.value}}</span>
    </div>
  </div>
</template>

<script>
  import api from "../../../axios/api"
    export default {
        name: "ranklist",
      data(){
          return {
            charts:[]

          }      },
      methods:{
        setDataFromAxios: function () {
          //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
          console.log(this.$store.state.host+"/chartController/charts/restaurantTop3byordersize")
          api.setDataFromAxios("/api/chartController/charts/restaurantTop3byordersize", null, "get")
            .then(dto => {
              console.log(dto)
              this.charts = dto.tList;
            });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
        },
      },
      created() {
          let  that = this;
          setInterval(function () {
            that.setDataFromAxios();
          },5000)

      }
    }
</script>

<style scoped lang="stylus">
  .chartListPane

    .newsTitle

      font-size 17px
      margin 10px 0 0 20px
      width 120px
      height 24px
     .el-icon-trophy
        font-weight 600
    .chartInfo
      margin-top 10px
      width : 320px;
      height : 24px;
      padding :  4px 0px



    span
      display : inline-block
      height   100px;
.chartInfo:nth-child(2) span
  color #e6ef37
.chartInfo
    &:nth-child(3)
      span
        color #a3a3a3


</style>
